import React from 'react';
import { FirstHeaderC, TreeChartsC, TreeChartsHC, TreeVEditChartsC, PrimaryC } from '../../comps';
import { Row, Col } from 'antd';
import _ from 'lodash';

class TreeEcharts extends React.Component {
  data = [
    {
      name: 'ROE净资产收益率',
      value: '0.60',
      children: [
        {
          name: '基准收益',
          value: '0.0887',
        },
        {
          name: '超额收益超额收益',
          value: '-2.57',
          children: [
            {
              name: '资产配置',
              value: '-0.00000256',
            },
            {
              name: '个股选择',
              value: '-5.16',
            },
            {
              name: '交互收益',
              value: '0.00000235',
            },
            {
              name: '资产配置资产',
              value: '-0.69',
            },
            {
              name: '个股选择',
              value: '-5.16',
            },
            {
              name: '交互收益',
              value: '3.27',
            },
            {
              name: '资产配置资产',
              value: '-0.69',
            },
            {
              name: '个股选择',
              value: '-5.16',
            },
          ],
        },
      ],
    },
  ];

  data2 = [
    {
      name: 'xxxxxx组合',
      value: 'code',
      children: [
        {
          name: 'xxxxxx组合1',
          value: 'code1',
        },
        {
          name: 'xxxxxx组合2',
          value: 'code2',
          children: [
            {
              name: 'xxxxxx组合21',
              value: 'code21',
            },
            {
              name: 'xxxxxx组合22',
              value: 'code22',
            },
          ],
        },
        {
          name: 'xxxxxx组合3',
          value: 'code3',
        },
      ],
    },
  ];

  constructor(props) {
    super(props);
    this.state = {
      data: this.data,
      data1: undefined,
      data2: _.cloneDeep(this.data2),
      data3: undefined,
      init: undefined,
      data5: [
        {
          name: 'ROE净资产收益率',
          value: '0.60',
          value1: '0.7',
          children: [
            {
              name: '基准收益',
              value: '0.0887',
              value1: '0.7',
            },
            {
              name: '超额收益超额收益',
              value: '-2.57',
              value1: '0.7',

              children: [
                {
                  name: '资产配置',
                  value: '-0.00000256',
                  value1: '0.7',
                },
                {
                  name: '个股选择',
                  value: '-5.16',
                  value1: '0.7',
                },
                {
                  name: '交互收益',
                  value: '0.00000235',
                  value1: '0.7',
                },
                {
                  name: '资产配置资产',
                  value: '-0.69',
                  value1: '0.7',
                },
                {
                  name: '个股选择',
                  value: '-5.16',
                  value1: '0.7',
                },
                {
                  name: '交互收益',
                  value: '3.27',
                  value1: '0.7',
                },
                {
                  name: '资产配置资产',
                  value: '-0.69',
                  value1: '0.7',
                },
                {
                  name: '个股选择',
                  value: '-5.16',
                  value1: '0.7',
                },
              ],
            },
          ],
        },
      ],
    };

    setTimeout(() => {
      this.setState({
        data1: [
          {
            name: 'xxx机构',
            value: '1',
            children: [
              {
                name: '基准收益',
                value: '2',
              },
              {
                name: '超额收益超额收益',
                value: '3',
                children: [
                  {
                    name: '资产配置资产',
                    value: '4',
                  },
                  {
                    name: '个股选择',
                    value: '5',
                  },
                  {
                    name: '交互收益',
                    value: '6',
                  },
                  {
                    name: '资产配置资产',
                    value: '7',
                  },
                  {
                    name: '个股选择',
                    value: '8',
                  },
                ],
              },
            ],
          },
        ],
        data3: _.cloneDeep(this.data2),
        init: { name: 'xxxxxx组合', value: 'code' },
      });
    }, 5000);
  }

  click = () => {
    this.state.TreeVEditChartsC.selectNode({ name: 'xxxxxx组合3', value: 'code3' });
  };
  render() {
    return (
      <div>
        <Row gutter={16}>
          <Col span={12}>
            <FirstHeaderC title='可编辑纵向树状图,初始化选中，同步' />
            <TreeVEditChartsC data={this.state.data2} height={400} selectedOnChange={(e) => console.log(e)} initNode={{ value: 'code1', name: 'xxxxxx组合1' }} />
          </Col>
          <Col span={12}>
            <FirstHeaderC title='可编辑纵向树状图,初始化选中，异步' />
            <TreeVEditChartsC
              data={this.state.data3}
              height={400}
              selectedOnChange={(e) => console.log(e)}
              initNode={this.state.init}
              onRef={(ref) => this.setState({ TreeVEditChartsC: ref })}
            />
            <PrimaryC title='点击更换选中节点' onClick={this.click} />
          </Col>
          <Col span={12}>
            <FirstHeaderC title='同步加载' />
            <TreeChartsC data={this.state.data} height={400} isPercent={true} />
          </Col>
          <Col span={12}>
            <FirstHeaderC title='异步加载' />
            <TreeChartsC data={this.state.data1} height={400} />
          </Col>
          <Col span={12}>
            <FirstHeaderC title='无数据' />
            <TreeChartsC data={[]} height={400} />
          </Col>
          <Col span={12}>
            <FirstHeaderC title='展示两份数值' />
            <TreeChartsC data={this.state.data5} height={400} legendName={['风险值', '超额风险值']} isPercent={true} />
          </Col>
        </Row>
        <Row>
          <Col span={24}>
            <TreeChartsHC data={this.state.data1} height={800} selectedOnChange={(e) => console.log(e)} />
          </Col>
          <Col span={24}>
            <TreeChartsHC data={this.state.data} height={800} selectedOnChange={(e) => console.log(e)} />
          </Col>
        </Row>
      </div>
    );
  }
}

export default TreeEcharts;
